<template>
  <div class="message-input-wrapper">
    <MessageInputQuote />
    <div
      :class="[
        'message-input-container',
        !isPC && 'message-input-container-h5',
      ]"
    >
      <MessageInputEditor
        ref="editor"
        :placeholder="props.placeholder"
        :isMuted="props.isMuted"
        :muteText="props.muteText"
        :enableInput="props.enableInput"
        :enableTyping="props.enableTyping"
        :enableDragUpload="props.enableDragUpload"
        @sendMessage="sendMessage"
        @onTyping="onTyping"
        @blurToolAndEmojiH5="blurToolAndEmojiH5"
      />
      <MessageInputButton
        v-if="!props.isMuted && isPC"
        @sendMessage="sendMessage"
      />
      <div v-if="isH5" class="emoji-icon" id="emoji-icon-h5" @click="emojiShow">
        <Icon :file="emojiIcon" width="20px" height="20px"/>
      </div>
      <div v-if="isH5" class="tool-icon" @click="toolShow">
        <Icon :file="toolIcon" width="20px" height="20px"/>
      </div>
      <div v-if="isH5" class="send-btn-h5" @click="sendMessage">
        发送
      </div>
    </div>
    
  </div>
</template>

<script setup lang="ts">
import {
  TUIStore,
  StoreName,
  IConversationModel,
} from '@tencentcloud/chat-uikit-engine';
import vue from '../../../adapter-vue';
import MessageInputEditor from './message-input-editor-web.vue';
import MessageInputButton from './message-input-button.vue';
import MessageInputQuote from './message-input-quote/index.vue';
import { sendMessages, sendTyping } from '../utils/sendMessage';
import { transformTextWithEmojiNamesToKeys } from '../emoji-config';
import { isPC,isH5 } from '../../../utils/env';
import Icon from '../../common/Icon.vue';
import emojiIcon from '../../../assets/emoji.png';
import toolIcon from '../../../assets/more_tools.png';
const { ref,onMounted,onBeforeUnmount } = vue;

const props = defineProps({
  placeholder: {
    type: String,
    default: 'this is placeholder',
  },
  isMuted: {
    type: Boolean,
    default: true,
  },
  muteText: {
    type: String,
    default: '',
  },
  enableInput: {
    type: Boolean,
    default: true,
  },
  enableDragUpload: {
    type: Boolean,
    default: true,
  },
  enableTyping: {
    type: Boolean,
    default: true,
  },
});

const emit = defineEmits(['sendMessage', 'resetReplyOrReference', 'onTyping','scrollToLatestMessage','changeToolbarDisplayType','insertEmoji','emojiShow','toolShow','blurToolAndEmojiH5']);
const editor = ref<InstanceType<typeof MessageInputEditor>>();
const currentConversation = ref<IConversationModel>();
const h5Dialog = ref<HTMLElement>();

onMounted(() => {
  // document.addEventListener('click', handleClick);
})

onBeforeUnmount(() => {
  // document.removeEventListener('click', handleClick);
})

function handleClick(e: any) {
  var div = document.getElementById('emoji-icon-h5'); // 替换为你的 div 元素的 ID
    var targetElement = e.target;

    if (div!=null && targetElement!=null && !div.contains(targetElement instanceof Node ? targetElement : null)) {
      // 在这里执行你想要触发的函数
      emit('blurToolAndEmojiH5');
    }
}

TUIStore.watch(StoreName.CONV, {
  currentConversation: (conversation: IConversationModel) => {
    currentConversation.value = conversation;
  },
});

const onTyping = (inputContentEmpty: boolean, inputBlur: boolean) => {
  sendTyping(inputContentEmpty, inputBlur);
};

const sendMessage = async () => {
  const _editorContentList = editor.value?.getEditorContent();
  if (!_editorContentList || !currentConversation.value) return;
  const editorContentList = _editorContentList.map((editor: any) => {
    if (editor.type === 'text') {
      editor.payload.text = transformTextWithEmojiNamesToKeys(
        editor.payload.text,
      );
    }
    return editor;
  });
  await sendMessages(editorContentList, currentConversation.value);
  emit('sendMessage');
  editor.value?.resetEditor();
};

const insertEmoji = (emoji: any) => {
  editor.value?.addEmoji(emoji);
};

const reEdit = (content: any) => {
  editor.value?.resetEditor();
  editor.value?.setEditorContent(content);
};


const emojiShow = () => {
  emit('emojiShow');
}

const toolShow = () => {
  emit('toolShow');
}

const blurToolAndEmojiH5 = () =>{
  emit('blurToolAndEmojiH5');
}

defineExpose({
  insertEmoji,
  reEdit,
  sendMessage,
});
</script>

<style scoped lang="scss">
@import "../style/common";

.message-input-wrapper {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

.message-input-container {
  box-sizing: border-box;
  flex: 1;
  display: flex;
  flex-direction: column;
  border: none;
  overflow: hidden;
}

.message-input-container-h5 {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-end;
}
.emoji-icon {
  background: #fff;
    border-radius: 0 9.4px 9.4px 0;
    padding: 9.4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.tool-icon {
  background: #fff;
  margin-left: 4px;
    border-radius: 9.4px;
    padding: 9.4px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.input-tool-dialog{
  height: fit-content;
    background: #fff;
}
.send-btn-h5 {
  background-color: #1c66e5;
    color: #fff;
    padding: 10px 12px;
    margin-left: 5px;
    border-radius: 7px;
}
</style>
